<template>
	<view class="main">
		<wd-tabs v-model="tab">
			<wd-tab title="生活缴费">
				<view class="content">
					<view class="content_Item" v-for="(item, index) in lifeData" :key="index">
						<view class="item_row">
							<view class="label">缴费项目：</view>
							<view class="value">{{ item.name }}</view>
						</view>
						<view class="item_row">
							<view class="label">缴费时间：</view>
							<view class="value">{{ item.date }}</view>
						</view>
						<view class="item_row">
							<view class="label">金额：</view>
							<view class="value">{{ item.amount }}</view>
						</view>
						<view class="item_row">
							<view class="label">状态：</view>
							<view :class="['status', item.status]">{{ item.statusText }}</view>
						</view>
					</view>
				</view>
			</wd-tab>
			<wd-tab title="停车缴费">
				<view class="content">
					<view class="content_Item" v-for="(item, index) in parkData" :key="index">
						<view class="item_row">
							<view class="label">缴费项目：</view>
							<view class="value">{{ item.name }}</view>
						</view>
						<view class="item_row">
							<view class="label">缴费时间：</view>
							<view class="value">{{ item.date }}</view>
						</view>
						<view class="item_row">
							<view class="label">金额：</view>
							<view class="value">{{ item.amount }}</view>
						</view>
						<view class="item_row">
							<view class="label">状态：</view>
							<view :class="['status', item.status]">{{ item.statusText }}</view>
						</view>
					</view>
				</view>
			</wd-tab>
		</wd-tabs>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		usePaymentStore
	} from '../../../stores/payment'
	const {
		type
	} = usePaymentStore()
	// 示例数据
	const tab = ref(type);
	const lifeData = ref([{
			name: "水费",
			date: "2024-11-24",
			amount: "50元",
			status: "paid",
			statusText: "已支付",
		},
		{
			name: "电费",
			date: "2024-11-20",
			amount: "100元",
			status: "paid",
			statusText: "已支付",
		},
	]);

	const parkData = ref([{
			name: "停车费",
			date: "2024-11-23",
			amount: "20元",
			status: "paid",
			statusText: "已支付",
		},
		{
			name: "停车费",
			date: "2024-11-18",
			amount: "15元",
			status: "paid",
			statusText: "已支付",
		},
	]);
</script>

<style>
	.main {
		min-height: 100vh;
		background-color: rgb(238, 238, 238);
		padding: 16px;
	}

	.content {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.content_Item {
		background-color: #fff;
		border-radius: 8px;
		padding: 16px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.item_row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8px;
	}

	.label {
		font-weight: bold;
		color: #333;
	}

	.value {
		color: #666;
	}

	.status {
		padding: 4px 8px;
		border-radius: 4px;
		text-align: center;
	}

	.status.paid {
		background-color: #dff0d8;
		color: #3c763d;
	}

	.status.unpaid {
		background-color: #f2dede;
		color: #a94442;
	}
</style>